<script setup lang="ts">
import { computed, PropType } from 'vue'
import { PageBean } from '../ts/types/BaseResult'
import logger from '../ts/logger'
import { ElPagination } from 'element-plus'

const props = defineProps({
  page: {
    type: Object as PropType<PageBean>,
    required: true,
    default: {} as PageBean,
  },
})

const pageInfo = computed(() => {
  return props.page
})

const emits = defineEmits(['number-change', 'size-change', 'page-change'])

const changeNumber = (pageNumber: number) => {
  pageInfo.value.pageNumber = pageNumber
  emits('number-change', pageNumber, props.page)
  emits('page-change', props.page)
}
const changeSize = (pageSize: number) => {
  pageInfo.value.pageSize = pageSize
  // 改变分页大小会强制返回第一页，也可以将此业务逻辑转移给size-change事件处理
  pageInfo.value.pageNumber = 1
  emits('size-change', pageSize, props.page)
  emits('page-change', props.page)
}

logger.debug('初始化分页组件')
</script>

<template>
  <div v-if="page.total > 0">
    <div class="flex-box-center">
      <div><slot></slot></div>
      <div class="mr05">
        <el-pagination background layout="prev,pager,next,jumper,total,sizes" :total="page.total" :page-size="page.pageSize" :page-sizes="[1, 5, 10, 20, 50, 1000]" :current-page="page.pageNumber" @current-change="changeNumber" @size-change="changeSize" />
      </div>
      <div> <slot name="page-end"></slot></div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.flex-box-center {
  display: flex;
  justify-content: center;
  padding: 0.5rem;
}
</style>
